import React from 'react';
import { Form, Input, Select, Upload, Button, Tooltip } from 'antd';
import { UploadOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { CancellationFormProps } from '../types';
import { FormField, VALIDATION_MESSAGES, CHANGE_TYPE_OPTIONS, TECH_IMPACT_OPTIONS } from '../constants';
import styles from './index.less';

const { TextArea } = Input;
const { Option } = Select;

const CancellationForm: React.FC<CancellationFormProps> = ({
  cancellationInfo,
  onChange,
  loading = false
}) => {
  // 处理字段变更
  const handleFieldChange = (field: string, value: any) => {
    onChange({ [field]: value });
  };

  // 处理文件上传
  const handleFileUpload = (info: any) => {
    // 此处仅为模拟，实际项目中需要与后端交互
    if (info.file.status === 'done') {
      const newAttachment = {
        id: info.file.uid,
        name: info.file.name,
        size: info.file.size,
        type: info.file.type,
        url: info.file.response.url || ''
      };
      
      const updatedAttachments = [...cancellationInfo.attachments, newAttachment];
      handleFieldChange(FormField.ATTACHMENTS, updatedAttachments);
    }
  };

  // 渲染附件列表
  const renderAttachments = () => {
    if (cancellationInfo.attachments.length === 0) {
      return <div className={styles['no-attachment']}>暂无附件</div>;
    }

    return (
      <ul className={styles['attachment-list']}>
        {cancellationInfo.attachments.map(attachment => (
          <li key={attachment.id} className={styles['attachment-item']}>
            <a href={attachment.url} target="_blank" rel="noopener noreferrer">
              {attachment.name}
            </a>
          </li>
        ))}
      </ul>
    );
  };

  return (
    <div className={styles['form-container']}>
      <Form layout="vertical">
        <div className={styles['form-section']}>
          <Form.Item
            label="审批意见"
            required
            rules={[{ required: true, message: VALIDATION_MESSAGES.REQUIRED }]}
          >
            <Input
              value={cancellationInfo.approvalOpinion}
              onChange={(e) => handleFieldChange(FormField.APPROVAL_OPINION, e.target.value)}
              placeholder="请输入审批意见"
              className={styles['form-control']}
            />
          </Form.Item>

          <div className={styles['form-row']}>
            <div className={styles['form-col']}>
              <Form.Item label="项目编号">
                <Input
                  value={cancellationInfo.projectId}
                  readOnly
                  className={styles['form-control']}
                />
              </Form.Item>
            </div>
            <div className={styles['form-col']}>
              <Form.Item label="项目名称">
                <Input
                  value={cancellationInfo.projectName}
                  readOnly
                  className={styles['form-control']}
                />
              </Form.Item>
            </div>
          </div>

          <div className={styles['form-row']}>
            <div className={styles['form-col']}>
              <Form.Item
                label="变更分类"
                required
                rules={[{ required: true, message: VALIDATION_MESSAGES.REQUIRED }]}
              >
                <Select
                  value={cancellationInfo.changeType}
                  onChange={(value) => handleFieldChange(FormField.CHANGE_TYPE, value)}
                  placeholder="请选择变更分类"
                  className={styles['form-control']}
                >
                  {CHANGE_TYPE_OPTIONS.map(option => (
                    <Option key={option.value} value={option.value}>
                      {option.label}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </div>
            <div className={styles['form-col']}>
              <Form.Item label="变更原因">
                <div className={styles['form-link-container']}>
                  <a href="#" className={styles['change-reason-link']}>
                    变更分类及变更原因
                  </a>
                  <Tooltip title="点击查看变更分类及变更原因详细说明">
                    <QuestionCircleOutlined className={styles['help-icon']} />
                  </Tooltip>
                </div>
              </Form.Item>
            </div>
          </div>

          <Form.Item label="技术外联单位影响">
            <Select
              value={cancellationInfo.technicalUnitImpact}
              onChange={(value) => handleFieldChange(FormField.TECHNICAL_UNIT_IMPACT, value)}
              placeholder="请选择是否有技术外联单位影响"
              className={styles['form-control']}
              allowClear
            >
              {TECH_IMPACT_OPTIONS.map(option => (
                <Option key={option.value} value={option.value}>
                  {option.label}
                </Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item
            label="取消原因说明"
            required
            rules={[{ required: true, message: VALIDATION_MESSAGES.REQUIRED }]}
          >
            <TextArea
              value={cancellationInfo.cancellationReason}
              onChange={(e) => handleFieldChange(FormField.CANCELLATION_REASON, e.target.value)}
              placeholder="请详细描述项目取消原因"
              rows={4}
              className={styles['form-control']}
            />
          </Form.Item>

          <Form.Item label="附件">
            <div className={styles['upload-container']}>
              <Upload
                name="file"
                action="/api/upload" // 实际项目中需要替换为真实的上传接口
                onChange={handleFileUpload}
                showUploadList={false}
              >
                <Button icon={<UploadOutlined />}>上传附件</Button>
              </Upload>
              <div className={styles['attachment-container']}>
                {renderAttachments()}
              </div>
            </div>
          </Form.Item>
        </div>
      </Form>
    </div>
  );
};

export default CancellationForm; 